<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>:animated选择器 了解</title>
		<style>
			*{
				font-family: "微软雅黑";
			}
			
			input[type=button]{
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
				font-size: 14px;
				width: 250px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
				
			}
			
			div{
				margin-top: 10px;
				width: 246px;
				height: 100px;
				border: 2px solid green;
			}
			
		</style>
	</head>
	<body>
		<input type="button"  id="run"  value="==开始执行动画==" />
		<div>Hello,Animate...</div>
	</body>
	
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		$("#run").click(function(){
			console.log("开始执行方法...");
			
			//让没有执行动画效果的div执行动画效果
			$("div:not(:animated)").animate({ 
			    width: "toggle",
			    height: "toggle", 
			  }, 2000);
		});
	</script>
</html>

<!--
	作者：offline
	时间：2016-05-26
	描述： :animated语法总结：
	1: 匹配所有正在执行动画效果的元素
-->

